<script setup lang="ts">
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'

const router = useRouter()
const errorMessage = ref('页面加载失败')

const handleRetry = () => {
	window.location.reload()
}

const handleGoHome = () => {
	router.push('/')
}
</script>

<template>
	<div class="router-error">
		<div class="error-content">
			<div class="error-icon">
				<ExclamationCircleOutlined style="font-size: 64px; color: #ff4d4f" />
			</div>
			<div class="error-title">页面加载失败</div>
			<div class="error-message">{{ errorMessage }}</div>
			<div class="error-actions">
				<a-button type="primary" @click="handleRetry">重新加载</a-button>
				<a-button @click="handleGoHome">返回首页</a-button>
			</div>
		</div>
	</div>
</template>

<style scoped>
.router-error {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #f5f5f5;
}

.error-content {
	text-align: center;
	max-width: 400px;
	padding: 0 20px;
}

.error-icon {
	margin-bottom: 24px;
}

.error-title {
	font-size: 20px;
	font-weight: 600;
	color: #333;
	margin-bottom: 8px;
}

.error-message {
	font-size: 14px;
	color: #666;
	margin-bottom: 24px;
	line-height: 1.5;
}

.error-actions {
	display: flex;
	gap: 12px;
	justify-content: center;
}
</style>
